 <template>
  <main class="relative flex-1 mt-15">
    <div class="page1 h-[400px] flex flex-col md:flex-row items-center justify-center p-4 border-b">
      <!-- 左侧文字部分 -->
      <div class="flex-1 text-center md:text-left md:pr-4 ">
        <h2 class="text-4xl font-bold text-white">AI Test for Your Plan</h2>
        <p class="mt-2 text-white text-3xl">
          Take an AI - analytical mini test to assess your
          knowledge. You'll get a personalized learning plan in just 30 minutes.
        </p>
        <n-space>
          <n-button color="#fff"
                    round
                    size="large"
                    type="primary"
                    ghost
                    class="home-btn1"
                    @click="gotoTrail($event,0)">
            English test
          </n-button>
          <n-button color="#fff"
                    round
                    size="large"
                    type="primary"
                    ghost
                    class="home-btn1"
                    @click="gotoTrail($event,1)">
            Math test
          </n-button>
        </n-space>
      </div>

      <!-- 右侧图片部分 -->
      <div class="flex-1 flex justify-center md:justify-end">
      </div>
    </div>
    <div class="page2 h-[500px] bg-[#eee] flex flex-col md:flex-row items-center justify-center p-4 border-b">
      <!-- 左侧部分 -->
      <div class="flex-1 flex justify-center ">
        <img src="@/assets/login-1.jpg"
             alt="示例图片"
             class="w-full max-w-[500px] h-auto rounded-lg shadow-lg" />
      </div>
      <!-- 右侧部分 -->
      <div class="flex-1 text-center pl-5 md:text-left md:pr-4">
        <h2 class="text-2xl font-bold">标题 {{ 1 }}</h2>
        <p class="mt-2 text-gray-600">
          这是第 {{ 1 }} 个 div 的文字内容。
        </p>
      </div>
    </div>
    <div class="page3 h-[500px] bg-[#fff] flex flex-col md:flex-row items-center justify-center p-4 border-b">
      <!-- 左侧部分 -->
      <div class="flex-1 text-center pl-5 md:text-left md:pr-4">
        <h2 class="text-2xl font-bold">标题 {{ 2 }}</h2>
        <p class="mt-2 text-gray-600">
          这是第 {{ 2 }} 个 div 的文字内容。
        </p>
      </div>
      <!-- 右侧部分 -->
      <div class="flex-1 flex justify-center ">
        <img src="@/assets/bg1.jpg"
             alt="示例图片"
             class="w-full max-w-[500px] h-auto rounded-lg shadow-lg" />
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
// 无需额外的逻辑
import { ref } from "vue";
import { NButton, NSpace } from "naive-ui";
import { useRouter } from "vue-router";

const router = useRouter();
const gotoTrail = (event, type) => {
  router.push("/trail/" + type);
};
</script> 

<style lang="less" scoped>
.page1 {
  background-image: url("@/assets/bg2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.home-btn1 {
  width: 140px;
  &:hover {
    opacity: 0.7;
  }
}
</style>